<!DOCTYPE html>
<html lang="en" class="page-fill">
<head>
    <meta charset="UTF-8">
    <title>明康医药，欢迎注册</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="keywords">
    <meta name="description">
    <link rel="shortcut icon" href="../images/favicon.ico" type="image/x-icon"/>
    <link rel="stylesheet" href="../css/oksub.css"/>
<!--    <link rel="stylesheet" href="/res/layui-v2.5.6/css/layui.css">-->

    <style>
        #login form.layui-form {
            margin: 0;
            transform: translate(-50%, -50%);
        }

        .register .tit {
            padding-top: 15px;
            text-align: center;
            font-size: 18px;
        }

        .register .code-box {
            display: flex;
        }

        .register .code-box .btn-auth-code {
            margin-left: 10px;
        }
    </style>
</head>
<body class="page-fill">
    <div class="page-fill register" id="login">
        <form class="layui-form" style="height: 462px">
            <div class="layui-form-item tit">注册</div>
            <div class="layui-form-item">
                <select name="companyId" id="companyId" lay-verify="required" lay-search="">
                    <option value="0">总公司</option>
                </select>
            </div>
            <div class="layui-form-item input-item">
                <label for="username">用户名</label>
                <input type="text" lay-verify="required" name="userName" placeholder="请输入账号" autocomplete="off" id="username" class="layui-input">
            </div>
            <div class="layui-form-item input-item">
                <label for="password">密码</label>
                <input type="password" lay-verify="required|password" name="userPassword" placeholder="请输入密码" autocomplete="off" id="password" class="layui-input">
            </div>
            <div class="layui-form-item input-item">
                <label for="comPassword">确认密码</label>
                <input type="password" lay-verify="required|comPassword" name="userPassword" placeholder="请确认密码" autocomplete="off" id="comPassword" class="layui-input">
            </div>
            <div class="layui-form-item input-item">
                <label for="phone">输入手机号</label>
                <input type="text" lay-verify="required|phone" name="userPhone" placeholder="请输入手机号" autocomplete="off" id="phone" maxlength="11" class="layui-input">
            </div>
            <div class="layui-form-item input-item code-box">
                <label for="authCode">验证码</label>
                <input type="text" lay-verify="required" name="captcha" placeholder="请输入验证码" id="authCode" autocomplete="off" maxlength="8" class="layui-input">
                <button type="button" class="layui-btn btn-auth-code">获取验证码</button>
            </div>
            <div class="layui-form-item">
                <button class="layui-btn layui-block" lay-filter="login" lay-submit="">注册</button>
            </div>
            <div class="login-link">
                <a href="login.html">有账号去登录</a>
            </div>
        </form>
    </div>
    <!--js逻辑-->
    <script src="../lib/layui/layui.js"></script>
    <script>
        layui.use(["form", "okGVerify", "okLayer"], function () {
            let form = layui.form;
            let $ = layui.jquery;
            let okGVerify = layui.okGVerify;
            let okLayer = layui.okLayer;
            let regPhone = /^[1][0-9]{10}$/;
            /**手机号验证**/
            let setInter = '';
            /**定时器对象*/
            let second = 60;//设置时间
            /**
             * 初始化验证码
             */
            // let verifyCode = new okGVerify("#captchaImg");
            /**
             * 查询所有分公司
             */
             $.ajax({
                 url:"/hqImm/queryAll",
                 dataType:"json",
                 data:'',
                 type:"post",
                 success:function (res) {
                     console.info(res)
                    $.each(res,function (index,item) {
                        $("#companyId").append(`<option value="${item.immId}">${item.immName}</option>`);
                    })
                     form.render("select");
                 },
                 error:function () {

                 }
             })

            /**
             * 数据校验
             */
            form.verify({
                password: [/^[\S]{6,12}$/, "密码必须6到12位，且不能出现空格"],
                phone: [
                    regPhone,
                    '输入的手机号格式不正确，请重新输入'
                ],
                comPassword: function (val) {
                    let password = $("#password").val();
                    return password == val ? '' : "两次密码不一致";
                }
            });


            /**
             * 表单提交
             */
            form.on("submit(login)", function (data) {
                console.info(data.field);
                //判断用户名是否存在
                $.post("/perUsers/findUserName",{userName:$("#username").val()},function (response) {
                    if(response.status>0){
                        okLayer.redCrossMsg(response.message);
                    }else{
                        let url = '/admin/getRegister';
                        $.ajax({
                            async:false,
                            dataType:"JSON",
                            data:data.field,
                            type:"POST",
                            url:url,
                            success:function(obj){
                                if (obj.status == 20) {
                                    okLayer.greenTickMsg("注册成功,去登陆", function () {
                                        window.location = "./login.html";
                                    });
                                }else if(obj.status == 50){
                                    layer.msg(`<a style='color:black;'>${obj.message}</a>`,{time:1000,icon:2});
                                }else if(obj.status == '6'){
                                    layer.msg(`<a style='color:black;'>${obj.message}</a>`,{time:1000,icon:2});
                                } else {
                                    layer.msg(`<a style='color:black;'>${obj.message}</a>`,{time:1000,icon:2});
                                }
                            },
                            error:function(){}
                        })
                    }
                },"json");
                return false;
            });
            /**
             * 表单input组件单击时
             */
            $("#login .input-item .layui-input").click(function (e) {
                e.stopPropagation();
                $(this).addClass("layui-input-focus").find(".layui-input").focus();
            });

            /**
             * 表单input组件获取焦点时
             */
            $("#login .layui-form-item .layui-input").focus(function () {
                $(this).parent().addClass("layui-input-focus");
            });

            /**
             * 表单input组件失去焦点时
             */
            $("#login .layui-form-item .layui-input").blur(function () {
                $(this).parent().removeClass("layui-input-focus");
                if ($(this).val() != "") {
                    $(this).parent().addClass("layui-input-active");
                } else {
                    $(this).parent().removeClass("layui-input-active");
                }
            });

            /**获取验证码**/
            $('.btn-auth-code').click(function () {
                let that = $(this),
                    phone = $("#phone").val();
                if ($(this).hasClass("layui-btn-disabled")) {
                    return;
                }
                if (regPhone.test(phone)) {
                    //有间隔时间就clear
                    if (!setInter) {
                        clearInterval(setInter);
                        that.addClass("layui-btn-disabled");
                        that.text(second + "秒后获取");
                        let url = "/send/"+phone;
                        $.ajax({
                            async:false,
                            dataType:"json",
                            type:'GET',
                            url:url,
                            success:function(obj){
                                if (obj.status == '1') {
                                    okLayer.greenTickMsg(obj.message);
                                }else if(obj.status == '2'){
                                    layer.msg(`<a style='color:black;'>${obj.message}</a>`,{time:1000,icon:2});
                                } else {
                                    layer.msg(`<a style='color:black;'>${obj.message}</a>`,{time:1000,icon:2});
                                }
                            },
                            error:function(){}
                        })
                        setInter = setInterval(function () {
                            second--;
                            if (second < 1) {
                                clearInterval(setInter);
                                that.removeClass("layui-btn-disabled");
                                that.text("重新获取");
                                setInter = "";
                                second = 60;
                            } else {
                                that.text(second + "秒后获取");
                            }
                        }, 1000);
                    }
                } else {
                    layer.msg("输入的手机号格式不正确，请重新输入", {
                        icon: "5",
                        anim: "6",
                    });
                    $("#phone").focus();
                }
            });
        });
    </script>
</body>
</html>
